<template>
  <view class="introduction-card">
    <view class="introduction-title">
      {{ title }}
    </view>
    <view class="box centent">
      <text style="width: 89vw;" class="header-title min">
        {{ list.name }}&nbsp;&nbsp;&nbsp;
        <uni-tag
            v-if="list.state"
            type="success"
            :text="list.state"
            inverted="false"
            size="small"

        ></uni-tag>
      </text>
<!--      <view class="tag-box">-->
<!--        <uni-tag-->
<!--            v-for="item in list.label"-->
<!--            :key="item"-->
<!--            type="primary"-->
<!--            :text="item"-->
<!--            inverted="true"-->
<!--            size="small"-->
<!--            custom-style="background-color: #F4F5FA;border:none;margin:5rpx ;padding:10rpx 20rpx"-->

<!--        />-->
<!--      </view>-->
      <view class="state">
        <!--  <view>
            正处于<text>&nbsp;&nbsp;{{ list.stage }}&nbsp;&nbsp;</text>阶段
          </view>
          <view>
            建议后续着重提升<text>&nbsp;&nbsp;{{ list.raise }}&nbsp;&nbsp;</text>能力值
          </view> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import {defineProps} from "vue";

const proos = defineProps({
  list: {
    type: Object,
    default: new Object(),
  },
  title: {
    type: String,
    default: "",
  },
});
</script>

<style lang="less" scoped>
@import "@/static/style/global.less";

.introduction-card {
  width: 100vw;
  height: 357rpx;
  background: @mutual-img;
  background-size: 100% 100%;
  position: relative;
  margin-bottom: 28rpx;

  .introduction-title {
    width: 100%;
    text-align: center;
    font-size: @font-size-31;
    font-weight: 500;
    font-family: "ali-m";
    line-height: 90rpx;
    color: @color-font;
  }

  .box {
    width: 85vw;
    bottom: 0;

    .tag-box {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f4f5fa;
      display: flex;
      flex-wrap: wrap;
    }

    .state {
      margin: 20rpx 0;
      font-size: @font-size-23;
      color: @color-grey;
      font-family: "ali";

      view {
        margin: 5rpx 0;
      }

      text {
        color: @color-green;
      }
    }
  }
}
</style>
